---
title: Frontend Tools
icon: "lucide/Wrench"
description: Create frontend tools and use them within your AG2 agent.
---

## Implementation

<Callout>
Check out the [Frontend Tools overview](/frontend-tools) to understand what they are and when to use them.
</Callout>

<Steps>
    <Step>
        ### Setup CopilotKit

        To use frontend tools, you'll need to setup CopilotKit first. For the sake of brevity, we won't cover it here.

        Check out our [getting started guide](/ag2/quickstart/ag2) and come back here when you're setup!
    </Step>

    <Step>
        ### Create a frontend tool

        First, you'll need to create a frontend tool using the [useFrontendTool](/reference/hooks/useFrontendTool) hook. Here's a simple one to get you started
        that says hello to the user.

        ```tsx title="page.tsx"
        import { useFrontendTool } from "@copilotkit/react-core" // [!code highlight]

        export function Page() {
          // ...

          // [!code highlight:15]
          useFrontendTool({
            name: "sayHello",
            description: "Say hello to the user",
            parameters: [
              {
                name: "name",
                type: "string",
                description: "The name of the user to say hello to",
                required: true,
              },
            ],
            handler: async ({ name }) => {
              alert(`Hello, ${name}!`);
            },
          });

          // ...
        }
        ```
    </Step>
    <Step>
        ### Inheriting from CopilotKitState

        Now, we'll need to modify the agent to access these frontend tools.

        To access the frontend tools provided by CopilotKit, you can inherit from CopilotKitState in your agent's state definition:

        <Tabs groupId="language_ag2_agent" items={['Python']} default="Python" persist>
            <Tab value="Python">
                ```python title="agent.py"
                # your code goes here...
                ```
            </Tab>
        </Tabs>

        By doing this, your agent's state will include the `copilotkit` property, which contains the frontend tools that can be accessed and invoked.
    </Step>
    <Step>
        ### Accessing Frontend Tools

        Once your agent's state includes the `copilotkit` property, you can access the frontend tools and utilize them within your agent's logic.

        Here's how you can call a frontend tool from your agent:

        <Tabs groupId="language_ag2_agent" items={['Python']} default="Python" persist>
            <Tab value="Python">
                ```python title="agent.py"
                # your code goes here...
                ```
            </Tab>
        </Tabs>

        These tools are automatically populated by CopilotKit and are compatible with LiteLLM's tool call definitions, making it straightforward to integrate them into your agent's workflow.
    </Step>
    <Step>
        ### Give it a try!
        You've now given your agent the ability to directly call any frontend tools you've defined. These tools will be available to the agent where they can be used as needed.
    </Step>

</Steps>